<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			input {
				/* 轮廓：0 */
				outline: 0;
				/* outline: none; */
			}
			textarea {
				/* 防拖拽 */
				resize: none;
				outline: none;
			}
			ul {
				/* 水平居中 */
				margin-left: auto;
				/* margin-right: auto; */
				/* 垂直居中，不对块级元素产生影响 */
				/* vertical-align: baseline | top | middle | bottom */
			}
			/* 去除图片底部缝隙 img默认基线对齐*/
			img {
				/* 第一种：转为块级元素 */
				display: block;
				/* 第二种：改变对齐方式 */
				vertical-align: top;
				vertical-align: middle;
			}
			.t {
				width: 120px;
				height: 20px;
				margin: 20px;
				border: 1px solid red;
				word-break: break-all; /* 允许单词拆开显示 */
				word-break: keep-all; /* 不允许拆开单词显示 连字符-特殊 */
				white-space: nowrap; /* 强制在同一行显示所有文本,直到文本结束或者遭遇br标签对象才换行 */
				/* 超出的部分省略号显示 */
				white-space: nowrap; /* 首先强制一行显示 */
				overflow: hidden;
				text-overflow: clip; /* 直接裁剪 */
				text-overflow: ellipsis; /* 超出部分省略号 */
				/* 移动背景图片 x y */
				background-position: 0 0;
			}
			.tran {
				width: 200px;
				height: 200px;
				background-color: antiquewhite;
				/* 要过渡的属性 过渡时间 运动曲线 何时开始 */
				transition: all .5s ease 0s;
			}
			.tran:hover {
				width: 400px;
				height: 400px;
				background-color: aquamarine;
			}
		</style>
	</head>
	<body>
		<!-- 鼠标样式 -->
		<ul>
			<li style="cursor: default;">小白</li>
			<li style="cursor: pointer;">小手</li>
			<li style="cursor: text;">文本</li>
			<li style="cursor: move;">移动</li>
		</ul>
		<input type="text" id="" value="" />
		<textarea name="" id="" cols="30" rows="10"></textarea>
		<div>
			<img src="https://hugp.top/images/pic.png" alt="">
		</div>
		<div class="t">
			my name is andy!
		</div>
		<hr>
		<div class="t">
			我的名字是安迪，楚乔的男朋友
		</div>
		<div class="tran"></div>
	</body>
</html>